<template>
  <div class="zh-classroom-visits clear">
    <div class="tour-course-menu fl">
      <!-- 学校专属显示 -->
      <template v-if="isSchool">
        <div class="course-setup">
          <el-button
            class="resetRequire"
            type="primary"
            @click="refreshHands"
            size="small"
          >刷新</el-button>
          <div class="course-setup-h clear">
            <span>校园分区</span>
            <i
              class="el-icon-setting fr"
              @click="setupOFF = !setupOFF"
            ></i>
          </div>
          <div
            class="course-setup-op"
            v-if="setupOFF"
          >
            <p>设置时间，定时切换直播界面</p>
            <div class="course-setup-off">
              <el-switch
                v-model="switchOFF"
                @change="changeTimeset"
                :active-text="switchOFF == true ? '已启用' : '已关闭'"
              >
              </el-switch>
            </div>
            <div
              class="course-setup-time"
              v-if="switchOFF"
            >
              <el-form
                :model="timeForm"
                :rules="rules"
                ref="timeForm"
              >
                <el-form-item prop="time">
                  <el-input
                    v-model="timeForm.time"
                    type="number"
                    placeholder="请输入整数"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-select
                    v-model="timeForm.format"
                    placeholder="请选择"
                  >
                    <!-- <el-option label="S"  value="1"> </el-option> -->
                    <el-option
                      label="M"
                      value="2"
                    > </el-option>
                    <el-option
                      label="H"
                      value="3"
                    > </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div
              class="course-setup-btn"
              v-if="switchOFF"
            >
              <el-button
                type="primary"
                @click="saveTimeset('timeForm')"
              >确定</el-button>
            </div>
          </div>
        </div>
      </template>
      <!-- 教育局专属显示 -->
      <template v-else>
        <el-select
          class="select-platform"
          v-model="platformCode"
          @change="checkedChange(0, 1)"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in platformData"
            :key="item.id"
            :label="item.name"
            :value="item.app_code"
          >
          </el-option>
        </el-select>
      </template>

      <div class="checked_vc">
        <el-row>
          <el-col :span="12">
            <span
              @click="checkedChange(0, 1)"
              :class="listParam.inspection_type === 0 ? 'is-active' : ''"
            >所有分区</span>
          </el-col>
          <el-col :span="12">
            <span
              @click="checkedChange(1, 1)"
              :class="listParam.inspection_type === 1 ? 'is-active' : ''"
            >教室分区</span>
          </el-col>
        </el-row>
      </div>
      <el-scrollbar
        class="menuNev"
        v-loading="ins_loading.status"
        v-if="isShow > 0"
      >
        <el-menu
          :default-active="fenqu ? fenqu + '' : '1'"
          class="el-menu-vertical-demo"
          unique-opened
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu
            v-for="(item, index) in getInspectionData"
            :key="item.id + ''"
            :index="index + ''"
            ref="submenuf"
          >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="item2 in item.children"
              :key="item2.id + ''"
              :index="item2.id + ''"
              @click="changeClassROOM(item2.id)"
            >
              <template slot="title">
                <i style="padding-left: 25px"></i>
                <span>{{ item2.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            id="hiddenmenu"
            index="hidden-4"
          ></el-menu-item>
        </el-menu>
      </el-scrollbar>
      <template v-else>
        <div class="menuNev nothing-logo">
          <div>
            <img src="../../../../public/images/u1300.png" />
            <!-- <div>无设备</div> -->
            <!-- <div>可在管理后台的设备列表中添加设备哦~</div> -->
          </div>
        </div>
      </template>
      <div
        class="video-mode"
        v-show="0"
      >
        <div class="video-mode-h">显示模式</div>
        <div class="video-mode-l">
          <button
            type="text"
            v-for="(item, index) in btn"
            :key="index"
            :class="{ active: isActive == index }"
            @click="btcActive(index)"
          >
            <i :class="`xun xunke_but${item.id}`"></i>
          </button>
        </div>
      </div>
    </div>

    <div
      class="course-video"
      v-loading="rec_loading.status"
    >
      <div class="course-mb">
        <i
          class="el-icon-arrow-left"
          v-show="pageMax > 1 && listParam.page_index > 1"
          @click="changePage(0)"
        ></i>
        <div class="course-pd">
          <!-- 2 *2  -->
          <div
            class="videoPN"
            v-if="isActive == 0"
          >
            <template v-for="n in 4">
              <div
                class="videoMp video_1"
                :key="n"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="n <= listData.length"
                  :listData="[listData[n - 1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="n > listData.length"
                >
                  <span>no signal</span>
                </div>
              </div>
              <div
                class="videoMp video_1"
                :key="n+'noshowChange'"
                v-else
                v-loading="true"
              ></div>
            </template>
          </div>

          <!-- 3 * 1  -->
          <div
            class="videoPN"
            v-if="isActive == 1"
          >
            <div class="videoPN_l">
              <div
                class="videoMp video_2"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 1"
                  :listData="[listData[0]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 1"
                >
                  <span>no signal</span>
                </div>
              </div>
              <div
                class="videoMp video_2"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 2"
                  :listData="[listData[1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 2"
                >
                  <span>no signal</span>
                </div>
              </div>
              <div
                class="videoMp video_2"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 3"
                  :listData="[listData[2]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 3"
                >
                  <span>no signal</span>
                </div>
              </div>
            </div>
            <div class="videoPN_r">
              <div
                class="videoMp video_2r"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 4"
                  :listData="[listData[3]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 4"
                >
                  <span>no signal</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 1 * 2  -->
          <div
            class="videoPN"
            v-if="isActive == 2"
          >
            <div class="videoPN_vl">
              <div
                class="videoMp video_3"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 1"
                  :listData="[listData[0]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 1"
                >
                  <span>no signal</span>
                </div>
              </div>
            </div>
            <div class="videoPN_vr">
              <div
                class="videoMp video_3"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 2"
                  :listData="[listData[1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 2"
                >
                  <span>no signal</span>
                </div>
              </div>
              <div
                class="videoMp video_3"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="listData.length >= 3"
                  :listData="[listData[2]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="listData.length < 3"
                >
                  <span>no signal</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 3 * 3  -->
          <div
            class="videoPN"
            v-if="isActive == 3"
          >
            <template v-for="n in 9">
              <div
                class="videoMp video_4"
                :key="n"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="n <= listData.length"
                  :listData="[listData[n - 1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-if="n > listData.length"
                >
                  <span>no signal</span>
                </div>
              </div>
            </template>
          </div>

          <!-- 4 * 3  -->
          <div
            class="videoPN"
            v-if="isActive == 4"
          >
            <template v-for="n in 12">
              <div
                class="videoMp video_5"
                :key="n"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="n <= listData.length"
                  :listData="[listData[n - 1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-else
                ><span>no signal</span></div>
              </div>
            </template>
          </div>

          <!-- 4 * 4  -->
          <div
            class="videoPN"
            v-if="isActive == 5"
          >
            <template v-for="n in 16">
              <div
                class="videoMp video_6"
                :key="n"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="n <= listData.length"
                  :listData="[listData[n - 1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-else
                ><span>no signal</span></div>
              </div>
            </template>
          </div>

          <!-- 4 * 5  -->
          <div
            class="videoPN"
            v-if="isActive == 6"
          >
            <template v-for="n in 20">
              <div
                class="videoMp video_7"
                :key="n"
                v-if="showChange"
              >
                <videoPlayer
                  v-if="n <= listData.length"
                  :listData="[listData[n - 1]]"
                ></videoPlayer>
                <div
                  class="bitmap"
                  v-else
                ><span>no signal</span></div>
              </div>
            </template>
          </div>
        </div>
        <i
          class="el-icon-arrow-right"
          v-show="pageMax > listParam.page_index"
          @click="changePage(1)"
        ></i>
      </div>
      <span class="paly-tips">多画面同时播放时可能受电脑配置问题会造成卡顿</span>
    </div>
  </div>
</template>
<script>
import videoPlayer from "./video";
let btn = [
  { id: 1, name: "1", size: "4" },
  { id: 2, name: "2", size: "4" },
  { id: 3, name: "3", size: "3" },
  { id: 4, name: "4", size: "9" },
  // {id: 5, name: '5',size:'12'},
  // {id: 6, name: '6',size:'16'},
  // {id: 7, name: '7',size:'20'},
];

export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      showChange: true,
      keyword: sessionStorage.getItem("canShu")
        ? JSON.parse(sessionStorage.getItem("canShu")).keyword
        : "",
      fenqu: null,
      platformData: [], //教育局-包含自身和所属下级的数据
      platformCode: "", //教育局-select框选中的平台app_code
      isShow: 0,
      activeName: "tab-0",
      activeIndex: 0,
      nothingLogo: "/static/image/affairs/u1300.png",
      ins_loading: {
        status: false,
      },
      rec_loading: {
        status: false,
      },
      btn: btn,
      isActive: 0,
      getInspectionData: [],
      listParam: {
        app_code: "",
        role_id: null,
        inspection_type: 0,
        inspection_id: 0,
        page_index: 1,
        page_size: btn[0].size,
        user_base_id: "",
        is_down: 0,
        // is_readdown: 1,
        // type: [0, 1, 2, 10],
      },
      pageMax: 0,
      listData: [],
      typeArr: {
        0: "0620",
        1: "0600B",
        2: "0650",
        3: "rtmp",
        4: "rtsp",
        5: "奥威亚",
        6: "网动",
        7: "中庆",
        8: "锐取",
        9: "0683",
        10: "0660",
      },
      operateCommonArr: {
        0: {
          无法连接: [],
          无法识别: [],
          录播中: [2, 3, 4, 5, 6, 7],
          直播中: [1, 3, 4, 5, 6, 7],
          录制中: [1, 2, 5, 6, 7],
          停止: [1, 2, 3, 6, 7],
        },
        1: {
          无法连接: [],
          无法识别: [],
          录播中: [22, 21, 8],
          停止: [20, 8],
        },
        2: {
          无法连接: [],
          无法识别: [],
          录播中: [9, 11, 12, 13],
          停止: [10, 13],
          已暂停: [10, 12, 13],
        },
        9: {
          不在线: [],
          在线: [],
        },
        10: {
          无法连接: [],
          无法识别: [],
          录播中: [25, 27, 28],
          停止: [26],
          已暂停: [26, 28],
        },
      },
      operateArr: {
        0: "尝试开机",
        4: "预览",
        1: "录播",
        2: "直播",
        3: "录制",
        5: "停止",
        6: "重启",
        7: "关机",
        22: "预览",
        20: "录播",
        21: "停止",
        8: "高级配置界面",
        14: "唤醒",
        /*9:'预览', */
        10: "录播",
        11: "暂停",
        12: "停止" /*,13:'高级配置界面'*/,
        15: "软关机",
        25: "预览",
        26: "录播",
        27: "暂停",
        28: "停止",
      },
      checked: false,
      setupOFF: false,
      switchOFF: false,
      timeForm: {
        format: "2",
        time: "",
      },
      timeFormCopy: {
        format: "2",
        time: "",
      },
      rules: {
        time: [
          { required: true, validator: this.validateTime, trigger: "blur" },
        ],
      },
      timer: null,
    };
  },
  async created() {
    this.listParam.role_id = JSON.parse(
      sessionStorage.getItem("user_info_str")
    ).role.join(",");
    if (this.isSchool) {
      await this.getInspection();
    } else {
      await this.getPlatformList();
    }
    await this.getTimeset();
  },
  watch: {
    pageMax() {
      this.loopScreen();
    },
    listData() {
      if (this.pageMax <= 1) {
        clearInterval(this.timer);
      }
    },
  },
  computed: {
    isSchool() {
      return this.$store.getters.isSchool;
    },
    isMulti() {
      return this.$store.getters.isMulti;
    },
    webrtc() {
      return this.$store.getters.isSupportWebRtc;
    },
    allownine() {
      return this.$store.getters.isAllowNine;
    },
  },
  beforeDestroy() {
    sessionStorage.removeItem("canShu"); // 离开页面移除自动登录 保存的分区信息
  },
  methods: {
    // 教育局 - 获取包含自身和下级的数据
    getPlatformList() {
      let params = {
        app_code: sessionStorage.getItem("CheckSchoolAppCode"),
        type: "all_array",
        is_include_myself: 1,
        updown: "down",
      };
      let success = (data) => {
        this.platformData = data.data;
        const app_code = sessionStorage.getItem("CheckSchoolAppCode");
        const flag = this.platformData.some((x) => {
          return app_code === x.app_code;
        });
        if (flag) {
          this.platformCode = app_code;
          this.getInspection();
        }
      };
      this.$ajax.get("api/newlevel/get_updown_platform", {
        params: params,
        func: { success: success },
      });
    },
    loopScreen() {
      if (this.switchOFF === true && this.pageMax > 1) {
        let time = null;
        let that = this;

        switch (this.timeFormCopy.format) {
          case "1":
            time = parseInt(this.timeFormCopy.time) * 1000;
            break;
          case "2":
            time = parseInt(this.timeFormCopy.time) * 1000 * 60;
            break;
          case "3":
            time = parseInt(this.timeFormCopy.time) * 1000 * 60 * 60;
            break;
        }

        clearInterval(this.timer);
        this.timer = setInterval(() => {
          if (that.pageMax > that.listParam.page_index) {
            that.listParam.page_index++;
          } else {
            that.listParam.page_index = 1;
          }
          that.getRecorderData();
          that.loopScreen();
        }, time);
      }
    },
    changeTimeset() {
      if (this.switchOFF === false) {
        let success = (data) => {
          this.setupOFF = false;
          clearInterval(this.timer);
          this.$message({ message: data.msg, type: "success" });
        };
        let params = {
          open: "0",
          timeset: "",
        };

        this.$ajax.post("api/school/inspection_timeset", params, {
          func: { success: success },
        });
      }
    },
    saveTimeset(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let time = "";
          if (this.timeForm.format === "1") {
            time = "*1";
          } else if (this.timeForm.format === "2") {
            time = "*60";
          } else if (this.timeForm.format === "3") {
            time = "*3600";
          }

          let params = {
            open: this.setupOFF === false ? "0" : "1",
            timeset: this.timeForm.time + time,
          };
          let success = (data) => {
            this.timeFormCopy = {
              time: this.timeForm.time,
              format: this.timeForm.format,
            };

            this.setupOFF = false;
            clearTimeout(this.timer);
            this.loopScreen();
            this.$message({ message: data.msg, type: "success" });
          };

          this.$ajax.post("api/school/inspection_timeset", params, {
            func: { success: success },
          });
        } else {
          return false;
        }
      });
    },
    validateTime(rule, value, callback) {
      if (!value) {
        return callback(new Error("请输入整数"));
      }
      if ((Number(value) | 0) !== Number(value)) {
        return callback(new Error("请输入整数"));
      }

      if (this.timeForm.format == 1) {
        if (value < 10 || value > 99) {
          callback(new Error("输入值在 10 - 99 之间"));
        } else {
          callback();
        }
      } else {
        if (value < 1 || value > 99) {
          callback(new Error("输入值在 1 - 99 之间"));
        } else {
          callback();
        }
      }
    },
    checkedChange(type, val) {
      this.$g.isCancelSource();

      this.listParam.inspection_id = "";
      this.listParam.inspection_type = type;
      this.getInspection();
    },
    getTimeset() {
      let success = (data) => {
        if (!is_empty(data.data)) {
          this.switchOFF = data.data.open === 0 ? false : true;
          if (this.switchOFF) {
            let timeSet = data.data.timeset;
            let result = timeSet.split("*");
            this.timeFormCopy = {
              time: result[0],
            };

            this.timeForm.time = result[0];
            if (result[1] === "3600") {
              this.timeForm.format = "3";
              this.timeFormCopy.format = "3";
            } else if (result[1] === "60") {
              this.timeForm.format = "2";
              this.timeFormCopy.format = "2";
            } else {
              this.timeForm.format = "1";
              this.timeFormCopy.format = "1";
            }
          }
        }
      };

      this.$ajax.get("api/school/inspection_timeset", {
        params: {},
        func: { success: success },
      });
    },
    changePage(type) {
      this.listData = [];
      if (type === 1) {
        this.listParam.page_index++;
      } else {
        this.listParam.page_index--;
      }
      this.getRecorderData();
    },
    refreshHands() {
      this.$g.isCancelSource();
      this.getRecorderData();
    },
    changeClassROOM(ID) {
      this.$g.isCancelSource();
      this.listParam.inspection_id = ID;
      this.listParam.page_index = 1;
      this.getRecorderData();
    },
    getInspection() {
      this.ins_loading.status = true;
      this.getInspectionData = [];
      this.isShow = 0;
      let params = {};
      if (this.isSchool) {
        params = {
          app_code: sessionStorage.getItem("CheckSchoolAppCode"),
          role_id: this.listParam.role_id,
          inspection_type: this.listParam.inspection_type,
        };
      } else {
        params = {
          app_code: this.platformCode,
          role_id: this.listParam.role_id,
          inspection_type: this.listParam.inspection_type,
          user_id: this.$g.user_id,
        };
      }
      let success = (data) => {
        this.ins_loading.status = false;
        this.getInspectionData = data.data;
        this.isShow = data.data.length;
        // console.log(this.keyword, "打你吧");
        if (!is_empty(this.keyword)) {
          // 自动登录，检测到分区名字则选中对应的分区
          let arr = [];
          data.data.map((i) => (arr = arr.concat(i.children)));
          this.fenqu = arr.filter((i) => i.name == this.keyword)[0].id;
          // 获取对应的设备
          this.listParam.inspection_id = this.fenqu;
          this.getRecorderData();
        } else {
          if (data.data.length > 0) {
            this.getRecorderData();
          }
        }
      };
      let fail = (data) => {
        this.ins_loading.status = false;
        this.$message.error(data.msg);
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/school/inspection_data", {
        params: params,
        func: { success: success, fail: fail },
      });
    },
    getRecorderData(val) {
      console.log("关闭之前的播放器");
      this.showChange = false;
      this.rec_loading.status = true;
      let success = (data) => {
        setTimeout(() => {
          console.log("打开新的播放器");
          this.showChange = true;
        }, 500);
        this.rec_loading.status = false;
        this.listData = data.data.data;
        this.getListAfter();
        this.pageMax = data.data.page_max;
      };
      let fail = (data) => {
        this.$nextTick(() => {
          this.showChange = true;
        });
        this.rec_loading.status = false;
        this.$message.error(data.msg);
      };

      if (val === 1) {
        this.listParam.inspection_id = 0;
      }
      this.listParam.app_code = this.platformCode;

      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/recorder/recorder_list", {
        params: this.listParam,
        func: { success: success, fail: fail },
      });
    },
    async getListAfter() {
      if (this.listData.length > 0) {
        for (var i = 0; i < this.listData.length; i++) {
          this.listData[i].recorder_status = null;
          this.listData[i].opArr = [];

          if (
            parseInt(this.listData[i].type) !== 3 &&
            parseInt(this.listData[i].type) !== 4
          ) {
            await this.getRecorderStatus(i);
          } else {
            //推拉流设备默认可以预览
            this.listData[i].preview = true;
            this.listData[i].loading = false;
          }
        }
      }
    },
    //异步加载设备状态
    getRecorderStatus(inx) {
      this.listData[inx].loading = true;
      this.listData[inx].opArr = [];
      //默认不可以预览
      this.listData[inx].preview = false;
      let success = (data) => {
        if (
          !is_empty(
            this.operateCommonArr[this.listData[inx].type][data.data._STATUS]
          ) &&
          this.operateCommonArr[this.listData[inx].type][data.data._STATUS]
            .length > 0
        ) {
          //可以预览
          this.listData[inx].preview = true;
          for (
            var i =
              this.operateCommonArr[this.listData[inx].type][data.data._STATUS]
                .length - 1;
            i >= 0;
            i--
          ) {
            var op = {
              code: this.operateCommonArr[this.listData[inx].type][
                data.data._STATUS
              ][i],
              txt: this.operateArr[
                this.operateCommonArr[this.listData[inx].type][
                  data.data._STATUS
                ][i]
              ],
            };
            if (!is_empty(op.code) && !is_empty(op.txt)) {
              this.listData[inx].opArr.push(op);
            }
          }
        }

        //添加当前状态
        this.listData[inx].opArr.unshift({ code: -1, txt: data.data._STATUS });
        if (!is_empty(data.data._STATUS) && data.data._STATUS == "停止") {
          this.listData[inx].opArr.push({ code: 15, txt: this.operateArr[15] });
        } else if (is_empty(data.data._STATUS) && data.data._STATUS == "录播") {
          this.listData[inx].opArr = [];
          this.listData[inx].opArr.push({ code: 14, txt: this.operateArr[14] });
          this.listData[inx].opArr[0] = { code: -1, txt: "关机状态" };
        }
        if (
          parseInt(this.listData[inx].type) === 0 &&
          data.data._STATUS == "无法连接"
        ) {
          this.listData[inx].opArr.splice(1, 0, {
            code: 0,
            txt: this.operateArr[0],
          });
        }
        //下拉第一个选项作为当前状态
        this.listData[inx].recorder_status = -1;
        this.listData[inx].loading = false;
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/recorder/recorder_status_xunjian", {
        params: { id: this.listData[inx].id },
        func: { success: success },
      });
    },
    chackPlayerMode(index) {
      if (index < 3) return true;
      if (!(this.webrtc && this.allownine)) {
        return (
          this.$message.error(
            "为避免卡顿,该浏览器无法切换到九个及以上画面,建议使用谷歌、360等浏览器观看"
          ),
          false
        );
      }
      return true;
    },
    btcActive(index) {
      // if (!this.chackPlayerMode(index)) return;
      this.isActive = index;
      this.listParam.page_index = 1;
      this.listParam.page_size = this.btn[index].size;
      this.getRecorderData();
    },
    handleOpen(key, keyPath) {
      this.listParam.inspection_id = this.getInspectionData[key].id;
      this.listParam.page_index = 1;
      document.getElementById("hiddenmenu").click();
      this.getRecorderData();
    },
    handleClose(key, keyPath) {},
  },
};
</script>

<style lang="scss">
.zh-classroom-visits {
  height: 91.5vh;
  overflow: hidden;

  #hiddenmenu {
    height: 0;
  }

  .nothing-logo {
    position: relative;

    > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      > div {
        padding: 5px 0 0;
        color: #9999a6;
        font-size: 14px;
        text-align: center;
        line-height: 18px;
      }
    }
  }

  .xun {
    background-image: url("../../../../public/images/xun.png");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
  }
  .xunke_but1 {
    background-position: -103px 0px;
    width: 88px;
    height: 57px;
  }

  .xunke_but11 {
    background-position: 0px -216px;
    width: 88px;
    height: 57px;
  }

  .xunke_but1_slide {
    background-position: -309px -189px;
    width: 15px;
    height: 30px;
  }

  .xunke_but1_up {
    background-position: -369px -144px;
    width: 15px;
    height: 30px;
  }

  .xunke_but2 {
    background-position: -206px 0px;
    width: 88px;
    height: 57px;
  }

  .xunke_but22 {
    background-position: -206px -72px;
    width: 88px;
    height: 57px;
  }

  .xunke_but2_slide {
    background-position: -339px -144px;
    width: 15px;
    height: 30px;
  }

  .xunke_but2_up {
    background-position: -309px -144px;
    width: 15px;
    height: 30px;
  }

  .xunke_but3 {
    background-position: -206px -144px;
    width: 88px;
    height: 57px;
  }

  .xunke_but33 {
    background-position: 0px 0px;
    width: 88px;
    height: 57px;
  }

  .xunke_but4 {
    background-position: -103px -216px;
    width: 88px;
    height: 57px;
  }

  .xunke_but44 {
    background-position: -206px -216px;
    width: 88px;
    height: 57px;
  }

  .xunke_but5 {
    background-position: -309px 0px;
    width: 88px;
    height: 57px;
  }

  .xunke_but55 {
    background-position: -103px -144px;
    width: 88px;
    height: 57px;
  }

  .xunke_but6 {
    background-position: 0px -144px;
    width: 88px;
    height: 57px;
  }

  .xunke_but66 {
    background-position: -103px -72px;
    width: 88px;
    height: 57px;
  }

  .xunke_but7 {
    background-position: 0px -72px;
    width: 88px;
    height: 57px;
  }

  .xunke_but77 {
    background-position: -309px -72px;
    width: 88px;
    height: 57px;
  }

  .tour-course {
    background: #effaff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 0;
    overflow: hidden;
    > div {
      text-align: left;
      text-align-last: initial;
      height: 100%;
      display: inline-block;
      vertical-align: top;
    }
  }

  .videoPN {
    width: 100%;
    height: 100%;
    text-align: justify;
    text-align-last: justify;
  }
  .el-menu {
    border: 0;
    background: none;
    .el-submenu {
      .el-menu-item {
        padding: 0 45px !important;
      }
    }

    .el-icon-location,
    .el-submenu__title {
      font-size: 14px;
      font-weight: 600;
      background-color: #d0ebf4;
    }
  }
  .menuNev {
    height: 50%;
    overflow: hidden;
    overflow-y: auto;

    .el-scrollbar__bar.is-horizontal {
      display: none;
      opacity: 0;
    }

    .el-scrollbar__wrap {
      overflow: auto;
    }

    .el-menu-vertical-demo {
      > li {
        border-bottom: 1px solid #d0ebf4;

        > div {
          border-bottom: 1px solid #d0ebf4;
        }

        ul > li {
          border-bottom: 1px solid #d0ebf4;
        }
      }
    }
  }

  .video-mode {
    height: calc(100% - 545px);
  }

  .video-mode-l {
    padding: 10px;
    height: calc(100% - 55px);
    overflow-y: overlay;

    > button {
      background: none;
      outline: none;
      border: 0;
      padding: 0;
      padding: 5px 10px;
      cursor: pointer;
    }
    .active {
      background: #a7d6ff;
    }
  }
  .video-mode-h {
    border-bottom: 1px solid #c4e2eb;
    font-size: 14px;
    height: 54px;
    line-height: 54px;
    padding: 0 20px;
  }

  .tour-course-menu {
    background: #dff3f9;
    width: 260px;
    overflow: hidden;
    height: 100%;

    .el-menu-item.is-active {
      color: #ffffff;
      background: #348efc;
    }

    .checked_vc {
      text-align: center;
      font-size: 14px;

      span {
        display: inline-block;
        padding: 18px 0;
        width: 100%;
        cursor: pointer;
      }

      .is-active {
        color: #fff;
        background-color: #348efc;
      }
    }
    .select-platform {
      margin: 20px;
    }
  }
  .course-video {
    position: relative;
    margin-left: 260px;
    height: 100%;

    .paly-tips {
      position: absolute;
      right: 40px;
      bottom: 60px;
      font-size: 12px;
      color: #808080;
      letter-spacing: 1px;
    }
  }

  .course-mb {
    height: 90%;
    width: 100%;
    margin: 3% auto 0;
    position: relative;

    > i {
      font-size: 30px;
      cursor: pointer;
      position: absolute;
      top: 48%;
      &:nth-of-type(1) {
        left: 0;
      }
      &:nth-of-type(2) {
        right: 0;
      }
      &:hover {
        color: #409eff;
      }
    }
    > div {
      width: 95%;
      height: 100%;
      text-align: justify;
      text-align-last: justify;
      margin: auto;
    }
  }

  .videoMp {
    position: relative;
    background: linear-gradient(
      #4977f7,
      #5274f4,
      #5e71f1,
      #686eed,
      #746ae9,
      #7e68e7
    );
    display: inline-block;
    vertical-align: top;
    text-align: left;
    text-align-last: initial;

    .bitmap {
      position: relative;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: #fff;
    }
  }

  .video_1 {
    width: 695/1400 * 100%;
    height: 395/806 * 100%;
    margin-bottom: 10/1400 * 100%;
    margin-right: 10/1400 * 100%;
    &:nth-of-type(2n) {
      margin-right: 0;
    }
  }

  .videoPN_l,
  .videoPN_r,
  .videoPN_vl,
  .videoPN_vr {
    display: inline-block;
    vertical-align: top;
    height: 100%;
  }
  .videoPN_l {
    width: 39%;
    .video_2 {
      width: 100%;
      height: 262/806 * 100%;
      margin-bottom: 10/555 * 100%;
    }
  }
  .videoPN_r {
    width: 60%;
    margin-left: 10/1400 * 100%;
    .video_2r {
      width: 100%;
      height: 100%;
    }
  }

  .videoPN_vl {
    width: 49%;
    .video_3 {
      width: 100%;
      height: 100%;
    }
  }
  .videoPN_vr {
    width: 50%;
    margin-left: 10/1400 * 100%;
    .video_3 {
      width: 100%;
      height: 49%;
      margin-bottom: 2%;
    }
  }

  .video_4 {
    width: 460/1400 * 100%;
    height: 260/806 * 100%;
    margin-bottom: 10/1400 * 100%;
    margin-right: 10/1400 * 100%;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }

  .video_5 {
    width: 340/1400 * 100%;
    height: 260/806 * 100%;
    margin-bottom: 10/1400 * 100%;
    margin-right: 10/1400 * 100%;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
  }
  .video_6 {
    width: 340/1400 * 100%;
    height: 197/806 * 100%;
    margin-bottom: 5/1400 * 100%;
    margin-right: 10/1400 * 100%;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
  }
  .video_7 {
    width: 340/1400 * 100%;
    height: 157/806 * 100%;
    margin-bottom: 5/1400 * 100%;
    margin-right: 10/1400 * 100%;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
  }

  .course-setup {
    position: relative;
    height: 60px;
    background-color: #bdefff;
    .resetRequire {
      position: fixed;
      top: 30px;
      right: 50px;
      z-index: 999999;
    }
    .course-setup-h {
      line-height: 60px;
      padding: 0 20px;
      font-size: 14px;

      > i {
        font-size: 22px;
        margin-top: 16px;
        cursor: pointer;

        &:hover {
          color: #348efc;
        }
      }
    }

    .course-setup-op {
      position: absolute;
      top: 60px;
      left: 0;
      background: #fff;
      padding: 20px;
      z-index: 3;
      width: 220px;
      font-size: 14px;

      > p {
        line-height: 40px;
      }

      .course-setup-off {
        margin-top: 15px;
      }

      .course-setup-time {
        margin-top: 25px;

        .el-form-item {
          display: inline-block;
        }

        .el-form-item:first-child {
          width: 120px;
        }

        > div {
          display: inline-block;
          vertical-align: top;
        }

        .el-input {
          width: 120px;
        }

        .el-select {
          width: 80px;

          .el-input {
            width: 100%;
          }

          .el-input__inner {
            border-left: 0;
          }
        }

        .el-input__inner {
          padding: 0;
          text-indent: 12px;
          border-radius: 0;
        }
      }

      .course-setup-btn {
        margin-top: 20px;
        padding-left: 20px;
        text-align: right;

        .el-button {
          padding: 8px 15px;
        }
      }
    }
  }

  // when the input box type is number,Control the up and down arrow does not display
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>